<template>
	<u-form :model="form" ref="uForm" :label-width="210" :error-type="['toast']">
		<u-form-item v-for="(v, k) in fields" :key="k" :label="v.name" :prop="v.fieldName" :required="v.isNull == 1">
			<u-input v-model="form[v.fieldName]" :type="formTypes[v.formType]" :placeholder="v.inputTips || '请输入' + v.name" :disabled="v.isDisabled == 1" @click="handlerSelect(v, k)" @input="inputChange" />
		</u-form-item>

		<!-- 日期组件 -->
		<u-picker v-model="picker.status" :mode="picker.mode" :safe-area-inset-bottom="true" @confirm="pickerConfirm"></u-picker>
		<!-- 选择客户 -->
		<u-popup v-model="popup.status" closeable :mode="popup.mode" :length="popup.height" :safe-area-inset-bottom="true" border-radius="10">
			<component :is="popup.widget" :data="popup.data" @selected="popSelected"></component>
		</u-popup>
	</u-form>
</template>

<script>
// 客户列表
import listCustomer from '@/pages/customerManagement/common/listCustomer';
// 商机列表
import listBusiness from '@/pages/customerManagement/common/listBusiness';
// 报价单列表
import listQuotation from '@/pages/customerManagement/common/listQuotation';
export default {
	name: 'comForm',
	components: {
		listCustomer,
		listBusiness,
		listQuotation,
	},
	props: {
		form: {
			type: Object,
			default() {
				return {};
			},
		},
		fields: {
			type: Array,
			default() {
				return [];
			},
		},
		rules: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {
			// 表单类型对照表
			formTypes: {
				text: 'text',
				customer: 'select',
				business: 'select',
				quotation: 'select',
				date: 'select',
				floatnumber: 'tel',
				datetime: 'select',
			},
			// 当前操作select的字段名称
			curField: '',
			// 当前操作select的索引
			curIndex: -1,
			// 日期组件相关字段
			picker: {
				status: false,
				mode: 'time',
			},
			// 弹窗信息
			popup: {
				status: false,
				mode: 'bottom',
				height: '600px',
				widget: '',
			},
		};
	},
	mounted() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		// 输入框改变事件，吧整个form表单数据回传
		inputChange() {
			let data = { ...this.form };
			// 处理存在field中的下啦选择的值
			this.fields.forEach((v) => {
				if (v.valueKey != null) {
					data[v.fieldName] = v.valueKey;
				}
			});
			this.$emit('onChange', data);
		},
		// 处理select数据
		handlerSelect(row, index) {
			this.curField = row.fieldName;
			this.curIndex = index;

			if (row.formType === 'date') {
				this.picker.status = true;
			}

			if (row.formType === 'customer') {
				this.popup.widget = 'listCustomer';
				this.popup.status = true;
			}
			if (row.formType === 'business') {
				// 如果没有选择客户
				if (!this.form.customer_id) {
					uni.showToast({
						icon: 'none',
						title: '请选择客户',
					});
					return;
				}
				this.popup.data = {
					customerId: this.fields.find((v) => v.fieldName === 'customer_id').valueKey,
				};
				this.popup.widget = 'listBusiness';
				this.popup.status = true;
			}
			if (row.formType === 'quotation') {
				// 如果没有选择客户
				if (!this.form.business_id) {
					uni.showToast({
						icon: 'none',
						title: '请选择商机',
					});
					return;
				}
				this.popup.data = {
					businessId: this.fields.find((v) => v.fieldName === 'business_id').valueKey,
				};
				this.popup.widget = 'listQuotation';
				this.popup.status = true;
			}
		},
		// 日期弹窗回调
		pickerConfirm(data) {
			this.form[this.curField] = `${data.year}-${data.month}-${data.day}`;
		},
		// pop弹窗回调
		async popSelected(type, data) {
			// 客户
			if (type === 'customer') {
				this.form.customer_id = data.customerId;
				this.popup.data = data;

				// 设置表单值
				this.form[this.curField] = data.customerName;
				this.fields[this.curIndex].valueKey = data.customerId;
			}
			// 商机
			if (type === 'business') {
				// 设置表单值
				this.form[this.curField] = data.businessName;
				this.fields[this.curIndex].valueKey = data.businessId;
				this.popup.data = data;
			}
			// 报价单
			if (type === 'quotation') {
				// 设置表单值
				this.form[this.curField] = data.quotationNumber;
				this.fields[this.curIndex].valueKey = data.quotationId;
			}
			this.popup.status = false;
		},
	},
};
</script>

<style lang="scss" scoped>
</style>